<template>
  <a-modal title="会员标签" width="45vw" :visible="visible" @cancel="handleCancel" @before-ok="handleBeforeOk" unmount-on-close>
    <page-form :model="form" layout="vertical" div="true" class="page-form">
      <page-form-item field="memberLabel" label="会员标签" size="1/2">
        <a-select v-model="form.memberLabel" placeholder="请选择">
          <a-option v-for="item in memberLabels" :key="item.value" :value="item.value" :label="item.name" />
        </a-select>
      </page-form-item>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="handleCancel">关闭</a-button>
        <a-button type="primary" @click="handleBeforeOk">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup name="memberStatusRecordModal">
  import { ref, onMounted } from 'vue'
  import { addLabel, getEnums } from '@/api/market/member'
  const emit = defineEmits(['save'])
  const visible = ref(false)
  const form = ref({
    memberLabel: '1',
  })
  const memberId = ref(null)
  const memberLabels = ref([])

  // 关闭
  const handleCancel = () => {
    visible.value = false
  }
  // 打开
  const openModal = (id) => {
    visible.value = true
    memberId.value = id
  }
  // 获取会员标签
  const getenums = () => {
    getEnums().then((res) => {
      memberLabels.value = res.result.MemberLabelInfoEnum
    })
  }

  // 提交
  const handleBeforeOk = () => {
    addLabel({ id: memberId.value, memberLabel: form.value.memberLabel }).then((res) => {
      if (res.code == 200) {
        emit('save')
        visible.value = false
      }
    })
  }

  onMounted(() => {
    getenums()
  })

  defineExpose({
    openModal,
  })
</script>
<style lang="less" scoped>
  :deep(.arco-row) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  :deep(.arco-modal-body) {
    padding: 10px 80px !important;
  }
  :deep(.arco-col) {
    padding: 0 10px !important;
  }
</style>
